<template>
	<view class="index-mian">
		<!-- <view v-if="type == 0">{{ text }}</view> -->
		<view v-if="type == 0" style="padding: 40px;" class="content-center">
			敬请期待
		</view>
		<index-home v-if="type == 1" />
		<index-setting v-if="type == 2" />
		<!-- v-show="show"  :class="{ bounceOutLeft: !show, wobble: show }" -->
		<view class="bar-box ui-flex ">
			<view
				class="my-flex content-center animated"
				:class="{ tada: type == 0, active: type == 0 }"
				@tap="barTap(0)"
			>
				<view>
					<view><faicon type="gittip" color="#f66" size="30"></faicon></view>
					<view class="content-center "><text>提醒</text></view>
				</view>
			</view>
			<view
				class="my-flex content-center animated"
				:class="{ tada: type == 1, active: type == 1 }"
				@tap="barTap(1)"
			>
				<view>
					<view><faicon type="home" color="#f66" size="30"></faicon></view>
					<view class="content-center"><text>首页</text></view>
				</view>
			</view>
			<view
				class="my-flex content-center animated"
				:class="{ tada: type == 2, active: type == 2 }"
				@tap="barTap(2)"
			>
				<view>
					<view><faicon type="heart" color="#f66" size="30"></faicon></view>
					<view class="content-center"><text>我的</text></view>
				</view>
			</view>
		</view>
		<view v-show="isModelShow" class="model content-center">
			<view
				style="padding: 20px;background: #f8f8f8;border-radius: 8px;margin-top: -100px;font-size: 14px;"
			>
				<view style="text-align: center;margin-bottom: 10px;font-size: 17px;color: #333">
					您没有登录过此应用
				</view>
				<!--  #ifdef  MP-WEIXIN -->
				<view
					style="text-align: center;margin-bottom: 20px;font-size: 15px;color: #616361;"
				>
					请先登录
				</view>
				<!--  #endif -->
				<!--  #ifndef  MP-WEIXIN -->
				<input
					type="text"
					value=""
					v-model="username"
					placeholder="用户名"
					style="padding: 5px;width: 100%;"
				/>
				<input
					type="text"
					value=""
					v-model="password"
					placeholder="密码"
					style="padding: 5px;width: 100%;"
				/>
				<!--  #endif -->
				<!--  #ifdef  MP-WEIXIN -->
				<button
					style="font-size: 15px;"
					type="primary"
					open-type="getUserInfo"
					@getuserinfo="loginWx"
				>
					用户登录
				</button>
				<!--  #endif -->
				<!--  #ifndef  MP-WEIXIN -->
				<button
					style="font-size: 15px;"
					type="primary"
					@tap="loginApp"
				>
					用户登录
				</button>
				<!--  #endif -->
			</view>
		</view>
	</view>
</template>

<script>
import IndexHome from './page/IndexHome';
import IndexSetting from './page/IndexSetting';
import { mapActions, mapGetters } from 'vuex';
export default {
	components: {
		IndexHome,
		IndexSetting
	},
	data() {
		return {
			type: 1,
			isShowAnime: false,
			colorHeight: '20%',
			username: '',
			password: '',
			text: ''
		};
	},
	async onLoad() {
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		//#ifdef MP-WEIXIN
		if(!this.userInfo) await this.initWxUserData();
		//#endif
		uni.hideLoading();
// 		uni.showToast({
// 			title: JSON.stringify(this.userInfo) + '-----' + JSON.stringify(this.wxInfo),
// 			duration: 200
// 		});
// 		this.text = JSON.stringify(this.userInfo) + '\n-----\n' + JSON.stringify(this.wxInfo);
// 		console.log(this.openid);
// 		console.log(this.userInfo, 'userInfo');
// 		console.log(this.wxInfo, 'wxInfo');
// 		console.log(this.token, 'token');
// 		this.$api['fun/userInfo']().then(res => {
// 			console.log(res, '120');
// 		});
		this.initData();
	},

	methods: {
		...mapActions(['initWxUserData', 'initWebUserData', 'setIsModelShow', 'setInfo']),
		loginWx(res) {
			let _this = this;
			if (res.detail.errMsg != 'getUserInfo:ok') {
				setIsModelShow(true);
			} else {
				console.log(JSON.stringify(res.detail), 'data');
				this.$ajax({
					url: 'https://wx.yttrium2016.cn/wx/addInfo',
					method: 'GET',
					data: {
						openid: _this.openid,
						infoStr: res.detail.rawData
					}
				}).then(res => {
					console.log(res, 'es');
					console.log(_this.userInfo, 'userInfo');
					console.log(_this.wxInfo, 'wxInfo');
					_this.setInfo(res.data);
					_this.$api['fun/addAccountTags']();
				});
			}
		},
		async loginApp() {
			await this.initWebUserData({
				username: this.username,
				password: this.password
			});
		},
		barTap(index) {
			this.type = index;
			if (index == 2) {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#ff6364',
					animation: {
						duration: 100,
						timingFunc: 'easeIn'
					}
				});
			} else {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 100,
						timingFunc: 'easeIn'
					}
				});
			}
		},
		goUrl: function(url) {
			uni.navigateTo({
				url: url
			});
		},
		async initData() {
			// let s = await this.$api['third/english']();
			// console.log(s, 'hhh:' + JSON.stringify(s));
		}
	},
	computed: {
		...mapGetters(['openid', 'isModelShow', 'wxInfo', 'userInfo', 'token'])
	}
};
</script>

<style lang="scss">
html,
body {
	height: 100%;
}
.bar-box {
	background: #f8f8f8;
	height: 58px;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #999;
	.fa {
		color: #999 !important;
	}
	.active {
		color: #007aff;
		.fa {
			color: #007aff !important;
		}
	}
}
.model {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 9999;
	background: rgba($color: #000000, $alpha: 0.3);
}
</style>
